<template>
   <div class="container" >
    <div>
        <input ref="iconValueRef" v-model="iconValue">
    </div>

    <div class="box1">
        <div v-for="(item,index) in getData()" :key="index">
        <component :is="item" class="icons" @click="getIcons(item)"></component>
        </div>
    </div>
   </div>
</template>
<script>
import * as ElIcons from '@element-plus/icons-vue'
   export default {
     name: '',
     components:{
        ...ElIcons
     },
     data: function(){
       return {
        iconValue:""
       }
     },
     methods:{
        getIcons(iconName){
            var contents ="<el-icon><" + iconName + "/></el-icon>";
            this.iconValue = contents;
            var dom = this.$refs.iconValueRef;
            dom.focus();
            dom.select();
            document.execCommand('copy');
        },
        getData(){
            const icons = [];
            for(const item in ElIcons){
                icons.push(item);
            }
            return icons;
        }
     },
    //  setup(){
    //     const getData = function(){
    //         const icons = [];
    //         for(const item in ElIcons){
    //             icons.push(item);
    //         }
    //     }
    //  }
   }
</script>
<style>
  html,
  body, 
  #app{
    height: 100%;
  }
</style>
<style scoped>
   .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: aliceblue;
   }
   .box1{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
    width: 100%;
    height: 100%;
   }
   .icons{
    width: 30px;
    height: 30px;
   }
   .tr{
      width: 200px;
      flex-basis: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: beige;
      align-items: center;
    }
   .second{
      background-color: aqua;
   }
</style>